
<template>
<div class="empty_page">
  <img src="@/assets/img/empty.png">
  <div class="empty_page_text">{{contentText}}</div>
  <div class="empty_page_button" @click="props.buttonClick()">{{buttonText}}</div>
</div>
</template>
<script setup>
//使用：<EmptyView contentText="暂无内容1" buttonText="去添加" :buttonClick="buttonClick" v-show="0==isshow"/>
import {ref,reactive, onMounted, inject, provide } from "vue";
const props = defineProps({
  buttonText: {
    type: String,
    default: '去添加'
  },
  contentText:{
    type: String,
    default: '暂无内容'
  },
  buttonClick:Function
});


const contentText=ref(props.contentText);
const buttonText=ref(props.buttonText);
</script>
<style scoped lang="less">
.empty_page{
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.empty_page img{
  height: 200px;
  width: 300px;
}
.empty_page_text{
  font-size: 30px;
  color: #888888;
}
.empty_page_button{
  height: 50px;
  background:linear-gradient(to right, #00BF87,#25F0A0);
  border-radius: 128px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 20px;
  margin-top: 20px;
}
</style>